<template>
	<div style="flex: 1;display: flex;flex-direction: column;padding: 10px;">
		<div style="flex: 1;display: flex;">
			<echarts-box title="年龄段情况" style="flex:1;margin-right: 20px;">
				<div slot="echarets" class="echaretsBoxTitle" id="Echarets1"></div>
			</echarts-box>
			<echarts-box title="项目信息" style="flex:1">
				<div slot="echarets" class="echaretsBoxTitle">
					<div style="padding: 14px;">
						<p>项目名称：{{project.name}}</p>
						<p>项目状态：{{project.projectStatus}}</p>
						<p>项目类别：{{project.category}}</p>
						<p>到期时间：{{project.serviceTime}}</p>
						<div class="bottom clearfix">
							<time class="time">{{ project.startDate }} 至 {{ project.endDate }}</time>
						</div>
						<!-- <div style="width: 40px;width: 100%;display: flex;margin-top: 15px;">
							<div class="daping jzxz_com" @click="tiaozhuan('http://datav.qzls-iot.com/#/?id=')">
								<i class="el-icon-data-line"></i>
								<span>大屏展示</span>
								<i class="el-icon-d-arrow-right"></i>
							</div>
							<div class="baifenbai jzxz_com" @click="tiaozhuan('post')">
								<i class="el-icon-pie-chart"></i>
								<span>八个百分百</span>
								<i class="el-icon-d-arrow-right"></i>
							</div>
						</div> -->
					</div>
				</div>
			</echarts-box>
		</div>
		<echarts-box title="班组情况" style="flex: 1;">
			<div slot="echarets" class="echaretsBoxTitle" id="Echarets2"></div>
		</echarts-box>
	</div>
</template>

<script>
	import {
		post
	} from '../../api/myFunction.js'
	import echartsBox from './components/echartsBox.vue'
	import Cookies from 'js-cookie'
	export default {
		computed: {
			projectID: function() {
				return Cookies.get('projectID');
			}
		},
		components: {
			echartsBox
		},
		props: {
			project: {
				type: Object
			},
			age: {
				type: Array
			},
			team: {
				type: Array
			},
		},
		mounted() {
			this.echaretsInit()
		},
		watch: {
			project() {
				this.echaretsInit()
			},
			age() {
				this.echaretsInit()
			},
			team() {
				this.echaretsInit()
			}
		},
		methods: {
			tiaozhuan: function(href) {
				if (href === 'post') {
					post(this, 'GET', 'project/standard', {
						id: this.projectID
					}, (res) => {
						window.open(res.data, '_blank');
					}, (err) => {})
				} else {
					window.open(href + this.projectID, '_blank');
				}
			},
			echaretsInit: function() {
				var xTitle1 = []
				var xData1 = []
				for (var i = 0; i < this.age.length; i++) {
					xTitle1.push(this.age[i].nnd)
					xData1.push({
						value: this.age[i].count,
						name: this.age[i].nnd
					})
				}

				var myChart1 = this.$echarts.init(document.getElementById('Echarets1'));
				var option1 = {
					color: ["#058dc9", "#ffc452", "#4caf50", "#3a6785", "#ebac91", "#f44336"],
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} 人({d}%)'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: xTitle1
					},
					series: [{
						name: '年龄段',
						label: {
							show: false,
						},
						type: 'pie',
						radius: '80%',
						center: ['50%', '50%'],
						data: xData1,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}],
				};
				myChart1.setOption(option1)



				var xTitle2 = []
				var xData2 = []
				for (var i = 0; i < this.team.length; i++) {
					xTitle2.push(this.team[i].teamName)
					xData2.push(this.team[i].workerCount)
				}



				var myChart2 = this.$echarts.init(document.getElementById('Echarets2'));
				var option2 = {
					tooltip: {
						trigger: 'item',
						formatter: '{b} : {c} 人'
					},
					color: ["#058dc9"],
					xAxis: {
						type: 'category',
						data: xTitle2
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: xData2,
						type: 'line',
						smooth: true
					}]
				};
				myChart2.setOption(option2)
			}
		}
	}
</script>

<style scoped>
	.daping,
	.baifenbai {
		color: #FFFFFF;
		text-align: center;
		line-height: 40px;
		height: 40px;
		flex: 1;
		border-radius: 20px;
		margin: 0 10px;
		position: relative;
		overflow: hidden;
		cursor: pointer;
		transition: all .1s;
		font-size: 14px;
	}

	.daping span,
	.baifenbai span {
		margin: 0 20px;
	}

	.daping:hover::after,.baifenbai:hover::after {
		width: 700px;
		height: 700px;
	}

	.daping::after,
	.baifenbai::after {
		content: '';
		width: 300px;
		height: 300px;
		position: absolute;
		left: -180px;
		top: -220px;
		transform: rotate(60deg);
		background-color: rgba(255, 255, 255, 0.1);
		transition: all .5s;
	}


	.daping {
		margin-right: 10px;
		background-color: #409EFF;
		box-shadow: 2px 2px 7px #409EFF;
	}

	.baifenbai {
		background-color: #67C23A;
		box-shadow: 2px 2px 7px #67C23A;
	}



	.title {
		font-size: 27px;
		font-weight: 800;
		margin-bottom: 10px;
	}

	.echaretsBoxTitle {
		background-color: #f3f3f3;
		height: calc(100% - 50px);
	}

	.time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: right;
	}

	.image {
		width: 100%;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}
</style>
